<template>
  <div class="navbar">
    <div class="logo">
      <img src="../../assets/logo.png" @click="$router.push('/home')" alt />
    </div>
    <div class="search">
      <div class="form"><van-icon class="icons" name="search" />请输入关键字</div>
    </div>

    <div class="head">
      <img v-if="userInfo.user_img" :src="userInfo.user_img" @click="$router.push('/edit')" alt />
      <img v-else src="../../assets/default_img.jpg" @click="$router.push('/login')" alt />
      <p>下载App</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    async NavInit() {
      if (sessionStorage.getItem('token')) {
        const id = window.sessionStorage.getItem('id')
        const res = await this.$axios.get('/user/' + id)
        // console.log(res)
        this.userInfo = res.data[0]
      }
    }
  },
  mounted() {
    this.NavInit()
  }
}
</script>

<style lang="stylus" scoped>
.navbar {
  height: 12.5vw;
  display: flex;
  background-color: #fff;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30.556vw;
}

.logo img {
  width: 80%;
}

.search {
  display: flex;
  flex: 1;
  align-items: center;
}

.form {
  font-size: 3.333vw;
  color: #aaa;
  background-color: #f4f4f4;
  height: 7.222vw;
  width: 100%;
  display: flex;
  align-items: center;
  margin-right: 3.056vw;
  padding-left: 2.222vw;
  border-radius: 3.611vw;
}

.icons {
  font-size: 4.444vw;
  margin-right: 0.556vw;
}

.head {
  display: flex;
  justify-content: center;
  align-items: center;
}

.head img {
  width: 6.667vw;
  height: 6.667vw;
  border-radius 50%
}

.head p {
  background-color: #fb7299;
  color: white;
  padding: 0 4.167vw;
  margin: 0 2.778vw;
  height: 6.944vw;
  line-height: 6.944vw;
  border-radius: 0.533vw;
}
</style>
